<template>
  <view>
    <z-paging
      ref="paging"
      style="background-color: #eeeeef"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar title="求职招聘" title-size="36" :border-bottom="false"> </u-navbar>
        <view class="shaixuan dis-flex flex-y-between">
          <view
            class="sx-item dis-flex flex-y-between"
            :class="scurrent == 1 ? 'sx-item-check' : ''"
            @click="scurrent = 1"
          >
            <view>找工作</view>
            <view v-if="scurrent == 1" class="sx-item-check-bt"></view>
          </view>
          <view
            class="sx-item dis-flex flex-y-between"
            :class="scurrent == 2 ? 'sx-item-check' : ''"
            @click="scurrent = 2"
          >
            <view>找人才</view>
            <view v-if="scurrent == 2" class="sx-item-check-bt"></view>
          </view>
        </view>
        <view class="screen dis-flex flex-y-between" v-if="scurrent == 1">
          <view class="screen-item" @click="show = true">
            <text>职位类别</text>
            <u-icon style="margin-left: 10rpx" name="arrow-down" color="#333333" size="16"></u-icon>
          </view>
          <view class="screen-item" @click="show = true">
            <text>区域</text>
            <u-icon style="margin-left: 10rpx" name="arrow-down" color="#333333" size="16"></u-icon>
          </view>
          <view class="screen-item" @click="show = true">
            <text>筛选</text>
            <u-icon style="margin-left: 10rpx" name="arrow-down" color="#333333" size="16"></u-icon>
          </view>
        </view>
        <view class="screen dis-flex flex-y-between" v-if="scurrent == 2">
          <view class="screen-item" @click="show = true">
            <text>地点</text>
            <u-icon style="margin-left: 10rpx" name="arrow-down" color="#333333" size="16"></u-icon>
          </view>
          <view class="screen-item" @click="show = true">
            <text>经验</text>
            <u-icon style="margin-left: 10rpx" name="arrow-down" color="#333333" size="16"></u-icon>
          </view>
          <view class="screen-item" @click="show = true">
            <text>学历</text>
            <u-icon style="margin-left: 10rpx" name="arrow-down" color="#333333" size="16"></u-icon>
          </view>
          <view class="screen-item" @click="show = true">
            <text>筛选</text>
            <u-icon style="margin-left: 10rpx" name="arrow-down" color="#333333" size="16"></u-icon>
          </view>
        </view>
      </view>
      <view class="infomation" v-if="scurrent == 1">
        <view class="goodsItemView">
          <view
            class="itemView"
            v-for="(item, index1) in itemList"
            :key="index1"
            @click="onOrderDetail(item)"
          >
            <view class="top dis-flex flex-y-between">
              <view class="title">{{ item.title }}</view>
              <view class="price">{{ item.price }}</view>
            </view>
            <view class="yaoqiu">
              <text class="bq">{{ item.type }}</text>
              <text class="bq">{{ item.edu }}</text>
              <text class="bq">{{ item.jingy }}</text>
              <text class="bq">{{ item.count }}</text>
            </view>
            <view class="company dis-flex">
              <view class="name">{{ item.company }}</view>
              <view class="label">{{ item.label }}</view>
            </view>
            <view class="bottom dis-flex flex-y-center flex-y-between">
              <view class="user dis-flex flex-y-center">
                <u-avatar class="avatar" size="60" :src="item.user.avatar"></u-avatar>
                <view class="label">{{ item.user.name }} · {{ item.user.zw }}</view>
              </view>
              <view class="add dis-flex flex-y-center">
                <u-image
                  style="margin-bottom: 6rpx"
                  src="@/static/dw-g.png"
                  width="20rpx"
                  height="24rpx"
                ></u-image>
                <view class="detail">{{ item.city }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="infomation" v-if="scurrent == 2">
        <view class="message-box" v-for="(item, index) in itemList" :key="index">
          <view class="box-detail dis-flex flex-y-between flex-x-top">
            <view class="box-left dis-flex flex-y-between flex-y-center">
              <u-avatar
                class="avatar"
                style="align-self: center"
                src="../../static/img/xt.png"
                size="90"
              ></u-avatar>
              <u-icon
                v-if="item.gender == 1"
                class="gender"
                name="/static/ns1.png"
                size="28"
              ></u-icon>
              <u-icon v-else class="gender" name="/static/ns2.png" size="28"></u-icon>
              <view class="user-info" style="margin-left: 20rpx">
                <view class="user-name">用户昵称</view>
                <view class="user-des">
                  <text class="eq">13年</text>
                  <text class="eq">36岁</text>
                  <text class="eq">本科</text>
                </view>
              </view>
            </view>
            <view class="box-right">
              <view class="price">{{ item.price }}</view>
              <view class="status">随时到岗</view>
            </view>
          </view>
          <view class="box-qiw">期望职位：前端开发工程师</view>
          <view class="box-date twoline-hide">
            个人优势：1.有多年系统维护、IT运维的工作经验，擅长服
            务器部署，服务器维护，安全管理和制定务器部署服务器...
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scurrent: 2,
      tabsList: [
        {
          name: '全部',
          status: '',
          commentStatus: ''
        },
        {
          name: '出租',
          status: 0,
          commentStatus: ''
        },
        {
          name: '出售',
          status: 10,
          commentStatus: ''
        },
        {
          name: '求租',
          status: 20,
          commentStatus: ''
        },
        {
          name: '求购',
          status: 30,
          commentStatus: false
        }
      ],
      itemList: [
        {
          title: '快递货物搬运工',
          price: '6-8K/月',
          type: '全职 ',
          edu: '高中 ',
          jingy: '经验不限 ',
          count: '招10人 ',
          company: '花果园国际物流有限公司 ',
          label: '民营企业 ',
          gender: 1,
          user: {
            zw: '人事总监',
            name: '佚名',
            avatar: ''
          },
          city: '贵阳市南明区'
        },
        {
          title: '快递货物搬运工',
          price: '6-8K/月',
          type: '全职 ',
          edu: '高中 ',
          jingy: '经验不限 ',
          count: '招10人 ',
          company: '花果园国际物流有限公司 ',
          label: '民营企业 ',
          user: {
            zw: '人事总监',
            name: '佚名',
            avatar: ''
          },
          city: '贵阳市南明区'
        }
      ],
      city: '',
      imgStyle: {
        width: '12rem'
      }
    }
  },
  onLoad() {
    // this.$u.get("/app-api/shop/info/get-category-list?type=0&parentId=1").then(res => {
    // 	res.data.forEach(item => {
    // 		this.categoryList.push(item)
    // 	})
    // 	this.queryList()
    // })
  },
  methods: {
    tabsChange(index) {
      this.current = index
    },
    routeTo(url) {
      uni.navigateTo({
        url: url
      })
    },

    clickScreen(index) {
      this.screenIndex = index
    },
    queryList(pageNo = 1, pageSize = 10) {
      // this.$u.api.getStoreList({
      // 	pageNo,
      // 	pageSize,
      // 	cityCode: this.cityCode,
      // 	recommend: 1
      // }).then(res => {
      // 	this.$refs.paging.complete(res.data.list)
      // })
    }
  }
}
</script>

<style scoped lang="scss">
page {
  background-color: #f0f0f0;
}

.cate-icon {
  vertical-align: middle;
  margin-right: 10rpx;
}

.shaixuan {
  background-color: #fff;
  padding-top: 10rpx;
  justify-content: space-around;
  height: 80rpx;
  .sx-item {
    height: 100%;
    background: #ffffff;
    border-radius: 10rpx;
    font-size: 30rpx;
    color: #333333;
    flex-flow: column;
    align-items: center;
  }
  .sx-item-check {
    font-weight: 600;
    font-size: 32rpx;
    color: #10a28f;
  }
  .sx-item-check-bt {
    width: 40rpx;
    height: 4rpx;
    background: #10a28f;
    border-radius: 2rpx;
  }

  .mar-20 {
    margin-right: 20rpx;
  }
}

.card {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}

.screen {
  height: 80rpx;
  background: #ffffff;
  line-height: 80rpx;
  padding: 0 20rpx;
  margin-top: 1rpx;
}

.infomation {
  padding: 20rpx;
}

.itemView {
  height: 300rpx;
  background: #ffffff;
  border-radius: 10rpx;
  padding: 10rpx 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  flex-flow: column;
  justify-content: space-around;

  .top {
    // margin-bottom: 22rpx;
    .title {
      font-weight: 600;
      font-size: 34rpx;
      color: #333333;
    }

    .price {
      font-weight: 600;
      font-size: 34rpx;
      color: #fa453c;
    }
  }

  .yaoqiu {
    // margin-bottom: 22rpx;
    .bq {
      background: #f0f0f0;
      border-radius: 5rpx;
      padding: 8rpx;
      font-size: 20rpx;
      color: #666666;
      margin-right: 10rpx;
    }
  }

  .company {
    font-size: 28rpx;
    color: #333333;

    // margin-bottom: 22rpx;
    .name {
      margin-right: 40rpx;
    }
  }

  .bottom {
    .user {
      .label {
        margin-left: 10rpx;
        font-size: 28rpx;
      }
    }

    .add {
      font-size: 26rpx;
      color: #999999;

      .detail {
        margin-left: 10rpx;
      }
    }
  }
}
.message-box {
  position: relative;
  height: 300rpx;
  background: #ffffff;
  margin-bottom: 20rpx;
  padding: 30rpx 20rpx;

  .box-detail {
    margin-bottom: 24rpx;

    .box-left {
      position: relative;

      .gender {
        position: absolute;
        left: 53rpx;
        bottom: -10rpx;
      }

      .user-info {
        height: 90rpx;
        padding: 2rpx 0;
        display: flex;
        justify-content: space-between;
        flex-flow: column;

        .user-name {
          font-weight: 600;
          font-size: 30rpx;
          color: #333333;
        }

        .user-des {
          font-size: 24rpx;
          color: #999999;

          .eq {
            margin-right: 12rpx;
            padding-right: 16rpx;
            border-right: 1rpx solid #999999;
          }

          .eq:last-child {
            border: none;
          }
        }
      }
    }

    .box-right {
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      height: 90rpx;
      padding: 2rpx 0;
      align-items: flex-end;
      .price {
        font-weight: 600;
        font-size: 34rpx;
        color: #fa453c;
      }
      .status {
        font-size: 24rpx;
        color: #666666;
      }
    }
  }

  .box-qiw {
    font-size: 28rpx;
    color: #333333;
    padding-bottom: 20rpx;
  }

  .box-date {
    font-size: 26rpx;
    color: #666666;
  }
}
</style>
